<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../element-plus/index.css" />
  </head>
  <body>
    <div id="box">
      <el-container>
        <el-header height="200px"></el-header>
        <el-main>
          <el-row>
            <el-col :span="8" :offset="8">
              <el-form
                ref="myFormRef"
                :model="myForm"
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
              >
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="myForm.username" clearable />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    type="password"
                    show-password
                    v-model="myForm.password"
                    clearable
                  />
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="submitForm('myFormRef')"
                    >Create</el-button
                  >
                  <el-button @click="resetForm('myFormRef')">Reset</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>

    <script src="../vue3.2.45.js"></script>
    <script src="../axios.min.js"></script>
    <script src="../element-plus/element-plus.js"></script>
    <script src="../md5.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            formSize: "default",
            myForm: {
              username: "",
              password: "",
            },
            rules: {
              username: [
                {
                  required: true,
                  message: "请输入用户名",
                  trigger: "blur",
                },
                {
                  min: 5,
                  max: 20,
                  message: "用户名长度为 5 ~ 20 位",
                  trigger: "blur",
                },
              ],
              password: [
                {
                  required: true,
                  message: "请输入密码",
                  trigger: "blur",
                },
                {
                  min: 6,
                  message: "密码应该是 6 位以上",
                  trigger: "blur",
                },
              ],
            },
          };
        },
        methods: {
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          submitForm(formName) {
            this.$refs[formName].validate((valid, fields) => {
              if (valid) {
                this.myForm.password = hex_md5(this.myForm.password);
                axios
                  .post("http://localhost/api/login", this.myForm)
                  .then((res) => {
                    let data = res.data;
                    if (data.code == 200) {
                      // localStorage
                      // sessionStorage

                      ElementPlus.ElMessage({
                        showClose: true,
                        message: "登录成功",
                        type: "success",
                        onClose: () => {
                          location.href = "axios.html";
                        },
                      });
                    } else {
                      alert(data.message);
                    }
                  })
                  .catch((err) => {
                    console.log(err);
                  });
                // console.log(JSON.stringify());
              }
            });
          },
        },
      });

      app.use(ElementPlus);
      app.mount("#box");
    </script>
  </body>
</html>
